<template>
  <div class="home">
    <navigationTitle
      @expanded="receiveArray"
      :letter="letter"
    ></navigationTitle>
    <div class="home_body">
      <div class="left">
        <catalogueView
          @message="receiveInitail"
          :expanded="expanded"
        ></catalogueView>
      </div>
      <div class="right">
        <!--@contextmenu.prevent="rightClick($event)" -->
        <router-view></router-view>
        <!-- 右键事件 -->
        <!-- <div
          v-show="visible"
          class="menuRight"
          @mouseleave="yichu"
          :style="{ left: left + 'px', top: top + 'px' }"
        >
          <div class="right_menu">
            <div
              class="menu_ow"
              v-for="(item, index) in data"
              :key="index"
              @mouseover="two_menuone(index)"
              @click="router_link(item, index)"
              :style="xscssone == index ? 'background:#00e0f6' : ''"
            >
              <i class="el-icon-caret-right right_click"></i>
              {{ item.label }}

              <div class="menu_erji" v-show="xsyc == index">
                <div
                  class="menu_ow"
                  v-for="(items, indexs) in item.children"
                  :key="indexs"
                  @mousemove="two_menutwo(indexs)"
                  @mouseleave="two_mousetwo"
                  @click="router_link(items, indexs)"
                  :style="xscsstwo == indexs ? 'background:#00e0f6' : ''"
                >
                  <i class="el-icon-caret-right right_click"></i>
                  {{ items.label }}
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <toolBar></toolBar>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import navigationTitle from "../components/navigationTitle.vue";
import catalogueView from "../components/catalogueView.vue";
import toolBar from "../components/toolBar.vue";
export default {
  name: "HomeView",
  data() {
    return {
      top: "0",
      left: "0",
      visible: false,
      xsyc: null,
      xscssone: null,
      xscsstwo: null,
      letter: "",
      expanded: [],
      data: [
        {
          // 采集汇报
          label: "采集汇报",
          children: [
            {
              label: "接引源配置",
              routers: "/collectionreport/connection",
            },
            {
              label: "数据接引",
              routers: "/collectionreport/dataccess",
            },
          ],
        },
        {
          // 整合治理
          label: "整合治理",
          children: [
            {
              label: "清洗和检测",
              routers: "/about/cleaningdetection",
            },
            {
              label: "清洗问题表",
              routers: "/about/cleaningproblems",
            },
            {
              label: "特征提取",
              routers: "/about/fatureextraction",
              children: [
                {
                  label: "太阳检测数据",
                  children: [
                    {
                      label: "太阳日冕层SDO AIA193观测",
                      csArray: ["数据"],
                      name: "inFormation",
                      username: "太阳日冕层SDO AIA193观测特征参数",
                    },
                    {
                      label: "太阳射线",
                      csArray: [
                        "编号",
                        "事件开始时刻",
                        "事件结束时刻",
                        "事件峰值时刻",
                        "耀斑等级",
                        "1-8A数据的峰值流量",
                        "1-8A数据的积分",
                        "0.5-4A数据的峰值流量",
                        "0.5-4A的积分",
                        "绘图",
                      ],
                      name: "inFormation",
                      username: "太阳X射线特征参数",
                    },
                  ],
                },
                {
                  label: "地球磁层",
                  children: [
                    {
                      label: "高能电子通量",
                      csArray: [
                        "事件编号",
                        "事件开始日期",
                        "事件结束日期",
                        "事件等级",
                        "最大日积分流量",
                        "最大日积分通量日期",
                        "绘图",
                      ],
                      name: "inFormation",
                      username: "高能电子通量特征参数",
                    },
                    {
                      label: "高能电子积分通量",
                      csArray: [
                        "事件编号",
                        "事件开始日期",
                        "事件结束日期",
                        "事件等级",
                        "最大日积分流量",
                        "最大日积分通量日期",
                        "绘图",
                      ],
                      name: "inFormation",
                      username: "高能电子积分通量参数",
                    },
                    {
                      label: "高能质子微分通量",
                      csArray: [
                        "事件编号",
                        "事件开始时刻",
                        "事件结束时刻",
                        "P10峰值时刻",
                        "P10峰值流量",
                        "P10积分",
                        "事件等级",
                        "绘图",
                      ],
                      name: "inFormation",
                      username: "高能质子积分通量特征参数",
                    },
                    {
                      label: "太阳风参数",
                      csArray: ["太阳风"],
                      name: "inFormation",
                      username: "太阳风参数特征参数",
                    },
                    {
                      label: "行星际磁场强度",
                      csArray: ["行星际磁场"],
                      name: "inFormation",
                      username: "行星磁场强度特征参数",
                    },
                    {
                      label: "地磁Kp指数",
                      csArray: [
                        "事件编号",
                        "事件开始时刻",
                        "事件结束时刻",
                        "事件中最大Kp指数",
                        "事件中最大Kp值的时刻",
                        "事件中最大Ap指数",
                        "事件中最大Ap指数的日期",
                        "最小Dst指数的时刻",
                        "绘图",
                      ],
                      name: "inFormation",
                      username: "地磁Kp指数特征参数",
                    },
                    {
                      label: "地磁Ap指数",
                      csArray: ["地磁Ap指数"],
                      name: "inFormation",
                      username: "地磁Ap指数特征参数",
                    },
                    {
                      label: "地磁Dst指数",
                      csArray: ["地磁Dst指数"],
                      name: "inFormation",
                      username: "地磁DSt指数特征参数",
                    },
                  ],
                },
                {
                  label: "电离层",
                  children: [
                    {
                      label: "电离层闪烁S4观测数据",
                      csArray: ["地磁Dst指数"],
                      name: "inFormation",
                      username: "电离层参数现报特征参数",
                    },
                  ],
                },
                {
                  label: "天基检测数据",
                  children: [
                    {
                      label: "天基环境载荷数据",
                      csArray: ["地磁Dst指数"],
                      name: "inFormation",
                      username: "天基环境载荷数据",
                    },
                  ],
                },
                {
                  label: "产品数据",
                  children: [
                    {
                      label: "电离层参数线报",
                      csArray: ["电离层参数线报"],
                      name: "inFormation",
                      username: "F10.7预报特征参数",
                    },
                    {
                      label: "F10.7预报",
                      csArray: ["F10.7预报"],
                      name: "inFormation",
                      username: "F10.7预报特征参数",
                    },
                    {
                      label: "Ap预报",
                      csArray: ["Ap预报"],
                      name: "inFormation",
                      username: "Ap预报",
                    },
                  ],
                },
              ],
            },
            {
              label: "汇聚关联分析",
              routers: "/about/convergenceassociation",
            },
          ],
        },
        {
          // 数据管理
          label: "数据管理",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
        {
          //数据服务
          label: "数据服务",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          // 智能应用
          label: "智能应用",
          routers: "/intelligent",
        },
      ],
    };
  },
  components: {
    navigationTitle,
    catalogueView,
    toolBar,
  },
  mounted() {
    // window.addEventListener("click", this.clickOther); //击其他位置的时候调用隐藏组件方法
  },
  methods: {
    yichu() {
      this.clickOther();
    },
    clickOther() {
      // 将组件隐藏
      this.visible = false;
      this.xsyc = null;
      this.xscsstwo = null;
    },
    receiveInitail(res) {
      this.letter = res;
    },
    receiveArray(res) {
      this.expanded = res;
    },
    rightClick(event) {
      // 获取其右键的位置 并将其显示出来
      this.visible = true; // 将组件显示出来
      this.left = event.clientX; // 获取其距离上一个有定位的父级的 x坐标（横着）
      this.top = event.clientY; // 获取其距离上一个有定位的父级的 y坐标（竖着）
    },
    two_menuone(index) {
      if (this.data[index].children) {
        this.xsyc = index;
      } else {
        this.xsyc = null;
      }
      this.xscssone = index;
    },
    two_menutwo(index) {
      this.xscsstwo = index;
    },
    router_link(item, index) {
      console.log(index);
      console.log(item.label);
      this.$router.push({ path: item.routers });
    },
    two_mousetwo() {
      this.xscsstwo = null;
    },
  },
};
</script>
<style lang="scss">
.home {
  .home_body {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left {
      width: 15%;
    }
    .right {
      width: 84%;
    }
    // .asd {
    //   width: 85%;
    //   .menuRight {
    //     width: 120px;
    //     padding: 10px 0;
    //     height: 300px;
    //     background: #000;
    //     border: 1px solid #00e0f6;
    //     position: absolute;
    //     font-family: "宋体";
    //     color: #fff;
    //     .right_menu {
    //       display: flex;
    //       flex-direction: column;
    //       align-items: center;
    //       .menu_ow {
    //         height: 30px;
    //         width: 100%;
    //         display: flex;
    //         align-items: center;
    //         .right_click {
    //           font-size: 18px;
    //           color: #00e0f6;
    //         }
    //       }
    //     }
    //   }
    //   .menu_erji {
    //     width: 120px;
    //     height: 200px;
    //     background: #000;
    //     position: absolute;
    //     right: -122px;
    //     top: 20px;
    //     border: 1px solid #00e0f6;
    //     border-left: none;
    //     padding: 10px 0;
    //     .right_menu {
    //       display: flex;
    //       flex-direction: column;
    //       align-items: center;
    //       .menu_ow {
    //         height: 30px;
    //         width: 90px;
    //         display: flex;
    //         .right_click {
    //           font-size: 18px;
    //           color: #00e0f6;
    //         }
    //       }
    //     }
    //   }
    // }
  }
}
</style>